<template>
  <div style="width: 900px;margin: 20px auto">

    <!-- 标题-->
    <div style="background-color: white; border-radius: 5px; border: solid 1px #009bb3;height: 50px;box-shadow: #009BB3 5px 7px 7px;font-size: 18px;color: #009bb3">
      <a href="/home/item/info" style="text-decoration: none;font-size: 18px;color: #009bb3">
        <p style="margin: 0 0 0 10px;line-height: 50px;float: left">首页</p>
      </a>
      <p style="margin: 0 0 0 10px;line-height: 50px;float: left">/</p>
      <p style="margin: 0 0 0 10px;line-height: 50px;float: left">{{itemDetail.name}}</p>
    </div>
    <!-- 正文-->
    <div style="margin-top: 15px">
      <!-- 左边-->
      <div style="box-shadow: #009BB3 0 0 5px;border-radius: 10px;float: left;margin-bottom: 20px">
        <img style="width: 400px;height: 400px" :src="'http://176.17.10.223:18081/'+itemDetail.img">
      </div>
      <!-- 右边-->
      <div style="box-shadow: #009BB3 0 0 5px;width: 450px;height: 400px;float: right;margin-bottom: 20px">
        <div  style="background-color: #009BB3;height: 45px;margin: 0;font-size: 20px;line-height: 45px;color: white;font-weight: bolder">
          <p style="margin: 0 0 0 15px">{{itemDetail.name}}</p>
        </div>
        <div class="infoDiv" >
          <p class="infoP1">物资编号:</p>
          <p style="margin: 0 0 0 80px;float: left;">{{itemDetail.id}}</p>
        </div>
        <el-divider></el-divider>
        <div class="infoDiv">
          <p  class="infoP1">发布时间:</p>
          <p class="infoP2">{{itemDetail.itemCreate}}</p>
        </div>
        <el-divider></el-divider>
        <div class="infoDiv">
          <p  class="infoP1">简介:</p>
          <p style="margin: 0 0 0 80px;float: left;">{{itemDetail.description}}</p>
        </div>
        <el-divider></el-divider>
        <div class="infoDiv">
          <p  class="infoP1">申请条件:</p>
          <p class="infoP2">{{itemDetail.requireApplication}}</p>
        </div>
        <el-divider></el-divider>
        <div class="infoDiv">
          <el-button type="primary" style="padding: 10px; margin-left: 20px;background-color: #0095d7">申请</el-button>
        </div>
        <el-divider style="margin: 0"></el-divider>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name : this.$route.query.name,
        itemDetail:{
          id:'',
          name:'',
          img:'',
          description:'',
          requireApplication:'',
          itemCreate:'',
        },
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        // 根据id获取资讯信息
        let url = "http://176.17.10.223:18081/item/details";
        let data = "name=" + this.name;
        this.axios.post(url,data).then( (response)=> {
          this.itemDetail  = response.data.data;
        })
      },
      goback(){
        this.$router.push({path: '/home/news'});  //页面路由刷新
      }
    },
  }
</script>

<style scoped>
  .el-divider--horizontal {
    margin: 0;
  }
  .infoDiv {
    height: 45px;
    font-size: 16px;
    line-height: 45px;
  }
  .infoP1{
    width: 70px;
    margin:0 0 0 20px;
    float: left
  }
  .infoP2{
    margin: 0 0 0 80px;
    float: left;
  }
</style>